<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>

img {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.layui-top-box {
	padding: 2px 15px 2px 15px;
	color: #000
}

.panel {
	margin-bottom: 17px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}

.panel-body {
	padding: 10px
}

.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
	color: inherit
}

.label {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
	margin-top: .3em;
}

.layui-red {
	color: red
}

.main_btn>p {
	height: 40px;
}

.pull-right {
	float: right;
}

 table {
    border-collapse: separate;
    border-spacing: 10px; /* 设置表格边框间距 */
    width: 100%;
  }
  
  td {
    padding: 3px; /* 设置单元格内间距 */
  }
  
</style>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main layui-top-box">

			<div class="layui-row layui-col-space10">
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h2 class="no-margins">铁矿采矿</h2>
								</div>
								<br>
								<div class="panel-content">
									<h5>企业数量：<span id="collectCount">***</span></h5>
									<h5>摄像头数量：<span id="collectCamCount">***</span></h5>
									<h5>在线摄像头数量：<span id="collectCamonCount">***</span></h5>
									<h5>离线摄像头数量：<span id="collectCamoffCount">***</span></h5>
									<h5>本月车流次数：<span id="collectRecords">***</span></h5>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: green;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h2 class="no-margins">铁矿选矿</h2>
								</div>
								<br>
								<div class="panel-content">
									<h5>企业数量：<span id="selectCount">***</span></h5>
									<h5>摄像头数量：<span id="selectCamCount">***</span></h5>
									<h5>在线摄像头数量：<span id="selectCamonCount">***</span></h5>
									<h5>离线摄像头数量：<span id="selectCamoffCount">***</span></h5>
									<h5>本月车流次数：<span id="selectRecords">***</span></h5>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-green" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h2 class="no-margins">水泥制造</h2>
								</div>
								<br>
								<div class="panel-content">
									<h5>企业数量：<span id="makeCount">***</span></h5>
									<h5>摄像头数量：<span id="makeCamCount">***</span></h5>
									<h5>在线摄像头数量：<span id="makeCamonCount">***</span></h5>
									<h5>离线摄像头数量：<span id="makeCamoffCount">***</span></h5>
									<h5>本月车流次数：<span id="makeRecords">***</span></h5>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-red" style="background-color: red;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h2 class="no-margins">混凝土</h2>
								</div>
								<br>
								<div class="panel-content">
									<h5>企业数量：<span id="applyCount">***</span></h5>
									<h5>摄像头数量：<span id="applyCamCount">***</span></h5>
									<h5>在线摄像头数量：<span id="applyCamonCount">***</span></h5>
									<h5>离线摄像头数量：<span id="applyCamoffCount">***</span></h5>
									<h5>本月车流次数：<span id="applyRecords">***</span></h5>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layuimini-main layui-top-box">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div>
							<span style="float: left; font-weight:bold; font-size:14px ">铁矿采矿-实时车流记录</span>
							<span onclick="skipOpen('/index/nr/oreCollectRecords','11003','铁矿采矿-实时车流记录')" style="font-size: 12px;float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 6px;">更多数据</span>
						</div>
						<br>
						<br>
						<div id="tableDiv0">
						</div>
					</div>
				</div>

				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div>
							<span style="float: left; font-weight:bold; font-size:14px ">铁矿选矿-实时车流记录</span>
							<span onclick="skipOpen('/index/nr/oreSelectRecords','11101','铁矿选矿-实时车流记录')" style="font-size: 12px;float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 6px;">更多数据</span>
						</div>
						<br>
						<br>
						<div id="tableDiv1">
						</div>
					</div>
				</div>
				
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div>
							<span style="float: left; font-weight:bold; font-size:14px ">水泥制造-实时车流记录</span>
							<span onclick="skipOpen('/index/nr/cementRecords','11201','水泥制造-实时车流记录')" style="font-size: 12px;float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 6px;">更多数据</span>
						</div>
						<br>
						<br>
						<div id="tableDiv2">
						</div>
					</div>
				</div>
				
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div>
							<span style="float: left; font-weight:bold; font-size:14px ">混凝土-实时车流记录</span>
							<span onclick="skipOpen('/index/nr/concreteRecords','11301','混凝土-实时车流记录')" style="font-size: 12px;float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 6px;">更多数据</span>
						</div>
						<br>
						<br>
						<div id="tableDiv3">
						</div>
					</div>
				</div>				
			</div>
		</div>
	</div>


	<script src="/layui/layui.all.js" charset="utf-8"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/core.util.js"></script>
	<script src="/js/echarts.min.js"></script>

	<script>
		
		(function() {
			
			var h2data = {};
			CoreUtil.sendPost("/nr/homemain/h2data", h2data, function (res) {
				//初始化渲染数据
				
				if (!CoreUtil.isEmpty(res.data)) {
					var list = res.data;
					$("#collectCount").html(list[0].collectCount);
					$("#collectCamCount").html(list[1].collectCamCount);
					$("#collectCamoffCount").html(list[2].collectCamoffCount);
					$("#collectCamonCount").html(list[3].collectCamonCount);
					$("#collectRecords").html(list[4].collectRecords);
					
					$("#selectCount").html(list[5].selectCount);
					$("#selectCamCount").html(list[6].selectCamCount);
					$("#selectCamoffCount").html(list[7].selectCamoffCount);
					$("#selectCamonCount").html(list[8].selectCamonCount);
					$("#selectRecords").html(list[9].selectRecords);
					
					$("#makeCount").html(list[10].makeCount);
					$("#makeCamCount").html(list[11].makeCamCount);
					$("#makeCamoffCount").html(list[12].makeCamoffCount);
					$("#makeCamonCount").html(list[13].makeCamonCount);
					$("#makeRecords").html(list[14].makeRecords);
					
					$("#applyCount").html(list[15].applyCount);
					$("#applyCamCount").html(list[16].applyCamCount);
					$("#applyCamoffCount").html(list[17].applyCamoffCount);
					$("#applyCamonCount").html(list[18].applyCamonCount);
					$("#applyRecords").html(list[19].applyRecords);
					
					
				}
			});
			
			var tableParams = {
				page: 1,
				limit: 10
			};
			CoreUtil.sendPost("/nr/homemain/staytimeTop", tableParams, function (res) {
				//初始化渲染数据
				if (res.data != null) {
						var list = res.data;
						var tableContent0 = "<table style='min-width: 100%;'>";
						var tableContent1 = "<table style='min-width: 100%;'>";
						var tableContent2 = "<table style='min-width: 100%;'>";
						var tableContent3 = "<table style='min-width: 100%;'>";
						if(!CoreUtil.isEmpty(list[0])){
							for(var i0 in list[0]){
								
								var nrEndangerName = list[0][i0].nrEndangerName;
								var time = list[0][i0].time;
								var image = list[0][i0].image;
								
								tableContent0 += "<tr>"
									+"<td style='width: 20px;font-size: 9px;padding:0px'>"+time+"</td>"
									+"<td style='font-size: 9px;padding:0px'>"+nrEndangerName+"</td>"
									+"<td data-src='"+image+"' onclick='showImage(this)' style='width: 20px;color: blue;cursor: pointer;font-size: 9px;padding:0px'>查看</td>"
									+"</tr>";
							}
							tableContent0 += "</table>";
						}else{
							tableContent0 = "<span>暂无数据... ...</span>";
						}
						
						if(!CoreUtil.isEmpty(list[1])){
							for(var i1 in list[1]){
								var nrEndangerName = list[1][i1].nrEndangerName;
								var time = list[1][i1].time;
								var image = list[1][i1].image;
								
								tableContent1 += "<tr>"
									+"<td style='width: 20px;font-size: 9px;padding:0px'>"+time+"</td>"
									+"<td style='font-size: 9px;padding:0px'>"+nrEndangerName+"</td>"
									+"<td data-src='"+image+"' onclick='showImage(this)' style='width: 20px;color: blue;cursor: pointer;font-size: 9px;padding:0px'>查看</td>"
									+"</tr>";
							}
							tableContent1 += "</table>";
						}else{
							tableContent1 = "<span>暂无数据... ...</span>";
						}
						
						if(!CoreUtil.isEmpty(list[2])){
							for(var i2 in list[2]){
								var nrEndangerName = list[2][i2].nrEndangerName;
								var time = list[2][i2].time;
								var image = list[2][i2].image;
								
								tableContent2 += "<tr>"
									+"<td style='width: 20px;font-size: 9px;padding:0px'>"+time+"</td>"
									+"<td style='font-size: 9px;padding:0px'>"+nrEndangerName+"</td>"
									+"<td data-src='"+image+"' onclick='showImage(this)' style='width: 20px;color: blue;cursor: pointer;font-size: 9px;padding:0px'>查看</td>"
									+"</tr>";
							}
							tableContent2 += "</table>";
						}else{
							tableContent2 = "<span>暂无数据... ...</span>";
						}
						
						if(!CoreUtil.isEmpty(list[3])){
							for(var i3 in list[3]){
								var nrEndangerName = list[3][i3].nrEndangerName;
								var time = list[3][i3].time;
								var image = list[3][i3].image;
								
								tableContent3 += "<tr>"
									+"<td style='width: 20px;font-size: 9px;padding:0px'>"+time+"</td>"
									+"<td style='font-size: 9px;padding:0px'>"+nrEndangerName+"</td>"
									+"<td data-src='"+image+"' onclick='showImage(this)' style='width: 20px;color: blue;cursor: pointer;font-size: 9px;padding:0px'>查看</td>"
									+"</tr>";
							}
							tableContent3 += "</table>";
						}else{
							tableContent3 = "<span>暂无数据... ...</span>";
						}
						
						$("#tableDiv0").html(tableContent0);
						$("#tableDiv1").html(tableContent1);
						$("#tableDiv2").html(tableContent2);
						$("#tableDiv3").html(tableContent3);
						
			        }
				});
		 })();
		
		
		
		
		
		function showImage(obj) {
			var src = $(obj).attr('data-src'); // 获取图片地址
			layer.open({
				type: 1,
			    title: false,
			    closeBtn: 0,
			    offset: 'auto', // 弹出位置，例如't'表示顶部中央
			    anim: 1, // 动画类型，可选
			    area: '850px',
			    skin: 'layui-layer-nobg', // 没有背景色的弹层
			    shadeClose: true,
			    content: '<img src="' + src + '" alt="图片" style="margin: auto; max-width: 100%; max-height: 100%">'
			  });
		};
		   
		
		function skipOpen(gnurl,gnid,title){
			if(CoreUtil.isEmpty(gnurl) || CoreUtil.isEmpty(gnid) || CoreUtil.isEmpty(title)){
				
				return false;
			}else{
				var gnurlArr = gnurl.split(",");
				var gnidArr = gnid.split(",");
				var titleArr = title.split(",");
				for (var i in gnurlArr) {
					skipExecute(gnurlArr[i],gnidArr[i],titleArr[i])
				}
			}
		}
		
		function skipExecute(gnurl,gnid,title){
			if ($(".layui-tab-title li[lay-id]").length <= 0) {
				
				var title = "<span>"+title+"</span>";
			    active.tabAdd(gnurl,gnid,title);
				
			} else {
				var isData = false;
				$.each($(".layui-tab-title li[lay-id]"),
					function() {
						if ($(this).attr("lay-id") == dataid.attr("data-id")) {
							isData = true;
						}
				})
				
				if (isData == false) {
					if (CoreUtil.isEmpty(dataid
							.attr("data-icon"))) {
						var title = "<span>"
								+ dataid.attr("data-title")
								+ "</span>";
						active.tabAdd(dataid.attr("data-url"),
								dataid.attr("data-id"), title);
					} else {
						var title = "<span>"
								+ dataid.attr("data-title")
								+ "</span>";
						title = '<i class="layui-icon '
								+ dataid.attr("data-icon")
								+ '"></i> ' + title;
						active.tabAdd(dataid.attr("data-url"),
								dataid.attr("data-id"), title);
					}
				}
			};
			
			active.tabChange(gnid);
		};	
		
		
		//触发事件
		var active = {
			tabAdd : function(url, id, title) {
				if (url != "" && url != null && url != undefined) {
					window.parent.layui.element
							.tabAdd(
									'tab',
									{
										title : title,
										content : '<iframe data-frameid="'
												+ id
												+ '" frameborder="0" name="content" width="100%" src="'
												+ url + '"></iframe>',
										id : id
									})
				}
				FrameWH();//计算框架高度
			},
			tabChange : function(id) {
				//切换到指定Tab项
				window.parent.layui.element.tabChange('tab', id); //切换到：用户管理
				$("iframe[data-frameid='" + id + "']").attr("src",
						$("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
			},
		};
		
		
		function FrameWH() {
			var h = $(window).height();
			$(window.parent.document).find("iframe").css("height", h + "px");
		};
		
	</script>


</body>
</html>